{% extends 'base.html' %}

{% block title %}商品首页{% endblock %}

{% block headerjs %}
    <style>
        .pagecls{
            font-size: 15px;
            color: red;
        }
    </style>
{% endblock %}

{% block main %}
    <div class="classes">
        <ul class="classes-items">

            {% for foo in category %}
                <li class="items {% if foo.id == cid %}active{% endif %}"><a href="/category/{{ foo.id }}">{{ foo.cname }}</a></li>
            {% endfor %}


        </ul>
    </div>

    <div class="goods-model">
        <div class="goods-content">

            {% for goods in goodlist %}

                <div class="good">
                        <a href="/goodsdetails/{{ goods.id }}">
                            <img src="{{ goods.getColorImg }}" width="285px" height="285px">
                            <p class="name">{{ goods.gname }}</p>
                            <div class="price">
                                <i>￥</i>
                                <p class="big">{{ goods.price }}</p>
                                <s>￥{{ goods.oldprice }}</s>
                            </div>
                            <div class="sale">
                                特卖
                            </div>
                        </a>
                    </div>
            {% endfor %}
            






        </div>
    </div>

    <div id="pager" style="text-align: center; font-size: 16px; overflow: hidden; margin-top: 10px;">
        {% if goodlist.has_previous %}
            <a href="/category/{{ cid }}/page/{{ goodlist.previous_page_number }}" style="display: inline-block; padding: 5px; margin: 5px;">上一页</a>
        {% endif %} 

        {% for page in pagelist %}
            <a href="/category/{{ cid }}/page/{{ page }}" {% if num == page %}class="pagecls"{% endif %}  style="display: inline-block; padding: 5px; margin: 5px;">{{ page }}</a>
        {% endfor %}
        

        {% if goodlist.has_next %}
             <a href="/category/{{ cid }}/page/{{ goodlist.next_page_number }}" style="display: inline-block; padding: 5px; margin: 5px;">下一页</a>
        {% endif %} 
    
    </div>

{% endblock %}

{% block footerjs %}
      <script>
        $('#pager').css({'text-align':'center','font-size':'16px','overflow':'hidden','margin-top':'10px'})
        $('#pager a').css({'display':'inline-block','padding':'5px','margin':'5px'})
    </script>
{% endblock %}
